由於疫情的關係
大家已在家學習一個月
原本想說最要克服的是自制力
但沒想到事情多到
我也沒時間發閒～～～

本週分領域學習：
Web-JavaScript

js筆記

引入：行內引入,內部引入,外部引入,動態引入

• JS引入

  • 行內引入→body: onload="alert('String要引號')">

  • 內部引入→window.alert('內部引入')

  • 外部引入→

  • 動態引入

    • 動態引入１→document.write('</script>');

    • 動態引入２

      <script>
          const elemHead = document.getElementsByTagName('head')[0];
          const elemScript = document.createElement('script');
          elemScript.src = './js/dynamic.js';
          elemHead.appendChild(elemScript);
        </script>
      

• DOM(document Object Model)

  • 選取

    • document.getElemenByID('idname')
    • querySelector('#idname')→缺點是如果今天抓的是有多個的class，只會抓取第一個
    • querySelectorAll(.classname)

  • 操作

    • 改變文字：textContent→document.querySelector('#id').textContent='Fanny';

    • 加入HTML：innerHTML→document.querySelector('#id').innerHTML='test';→資安疑慮，如果有放入表單輸入資料，容易被攻擊

    • 更改影像：src→document.querySelector('#pic').src='./img/'

    • 加入CSS：style→document.querySelector('#id').style.borderLeft='solid 2px red';

      ：document.querySelector('#pic').setAttribute('src','./img....');
      

      ：document.querySelector('#pic').setAttribute('style','border: solid..');

    • 套用格式：className→document.querySelector('#').className+=' .敲一個空格';

    • 較直觀的套用格式：classList→document.querySelector('#').classList.add(' classname', 'gg'); 注意：名字就好

• event

  • click

    • document.querySelector('#id').addEventListener('click',function(){alert(''Hi)});
    • 箭頭函式：document.querySelector('#id').addEvenListener('click',()⇒{});

  • mouse

    • document.querySelector('#id').addEventListener('mouseenter',function(){document.querySelector('#id').src='./img...'}); 紅色部分可改this
    • document.querySelector('#id').addEventListener('mouseleave',function(){document.querySelector('#id').src='./img...'});
    • 用this不能用箭頭函式，this會是window,而window他沒有src屬性

  • keyup

    • document.querySelector('#id').addEventListener('keyup',function(e){if(e.keycode===13){alert(this.value)}} ); this是整個表單
    • alert出來是字串！

  • 額外補充：→抓表單值抓value

  • change

    • document.querySelector('#id').addEventListener('change',function(){alert('this.value')});

  • 事件流Propagation：boxin,boxout

    • js預設冒泡→從點選對象往上層

    • 捕獲→

      document.querySelector('#boxin').addEventListener('click',function()
      {console.log(this.id);
      e.stopPropagation;
      });
      

• number

  • 累加→設定button被監聽到click時做++
  • 亂數→const RandNum=Math.random();
    • 10倍亂→document.querySelector('#id').textContent=RandNum*10;
    • 10倍四捨五入→document.querySelector('#id').textContent=Math.round(RandNum*10);
    • 無條件捨去→document.querySelector('#id').textContent=Math.floor(RandNum*10);
    • 無條件進位→document.querySelector('#id').textContent=Math.ceil(RandNum*10);

• String

  • const str='list';

    const str=''+'list'+<'/ul'>;

    const str='<li>list</ul>';

    const str=<ul><li>list</li></ul>

    document.querySelector('#list').innerHTML=str;

  • const age=20;

    const str=我今天${age}歲;→IE11以下不支援

• 變數型態：boolean, undefined, null

  • boolean→const isMobile=window.innerWidth≤480;

    console.log(isMobile);

  • undefined→宣告卻未賦

  • null→指向空

• array&object

  • let arr=new Array();

    arr=[1,2,3,4,'book'];

  • const arr=new Array(5, 6, 7, 'hi');

  • let arr=[];

    arr=[2, 4, 5, 'go'];

  • const arr=[1, 3, 5, 'now'];

  • 物件陣列

    • const obj=new Object();

      obj.name='Fanny';

    • const obj={};

      obj.age=30;

    • const obj={

      name:'Fanny',

      age=30

      };

    • 取物件長度：

      object.keys(obj).length

• function-for/if-else

  可以獨立取出來

• interval&timeout

  • 定時器interval

    let count=0;
    setInterval(function(){...},1000);//毫秒
    

  • 暫停器timeout

    let count=0;
    setTimeout(function(){...},2000);//2秒後暫停